<html > 
<head> 
<title> new document </title> 
<meta charset="utf-8">
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<style type="text/css"> 

body{margin:0; padding: 0;}

header{
    height: 70px;
    border: 2px solid red;
}
nav{
    height: 30px;
    border: 1px solid blue;
    margin: 15px 3px 0 3px;
}
nav ul{
    list-style-type: none;

}
nav ul li{
    width: 70px;
    float: left;
    margin-top: -10px;


}
li a{
    text-decoration: none;

}
a:hover{
    color: lime;
}

.container{
    margin-top: 20px;
    height: 500px;
    border: 2px solid gray; 
    padding: 20px 300px 20px 20px; 
  



}
article{
    padding: 20px ;
    border: 2px solid red;
    height: 400px;


}
section{
    border: 2px solid lime;
    height: 100px;
    margin: 10px;

}

aside{
    float: right;
    background-color: lime;
    width: 200px;
    height: 300px;
    margin-right: -260px;
    margin-top: -450px; 

}
footer{
    height: 40px;
    border: 2px solid blue;
    margin: 10px;

}

.main{
    height: 600px;
    border:  1px solid red;
    padding: 20px 300px 20px 20px;

}
.left{
    height: 30px;
    width: 200px;
    background-color: red;
    float: left;


}
.middle{

    height: 400px;
    background-color: yellow;
    margin-left: 220px;
    
     
  

   


}
 .right{
    height: 30px;
    width: 200px;
    margin-top: -400px;
    margin-right: -220px;
    float: right;
    background-color: red;


} 
.aa{
    margin-top: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;


}
.bb{
    width: 200px;
    height: 200px;
    background-color: lime;
    
 
}
.cc{
    width: 300px;
    height: 300px;
    background-color: blue;
    

}
.abc{
    width: 50px;
    height: 900px;
    background-color: gray;
    overflow: visible;
    

}

.sprites{
    width: 500px;
    height: 150px;
    margin: 20px auto;
    border: 1px solid black;
}
.sprites ul li{
    list-style-type: none;
    height: 24px;
    text-align: left;
    line-height: 24px;
}

.sprites ul li span.a1{
    float:left;
    width:20px;
    height:20px;
    background:url(ico.png) ;
    background-position:  -86px -32px;

}
.sprites ul li a{
    padding-left: 10px;
    
}
.box1{
    display: flex;
    width:100%;
}
.m1{
    height: 300px;
    width: 200px;
    background-color: red;
}
.l1{
    height: 300px;
    background-color: yellow;
    flex:2;
    
}
.r1{
    height: 300px;
    width: 200px;
    background-color: lime;
}

</style> 
</head> 
<body class=""> 
<div class="box1">
    <div class="m1"></div>
<div class="l1"></div>
<div class="r1"></div>
</div>


<div style="clear:both"></div>

<div class="sprites">
    <ul>
        <li><span class="a1"></span><a href="">a1</a></li>
        <li><span class="a2"></span><a href="">a2</a></li>
        <li><span class="a3"></span><a href="">a3</a></li>
        <li><span class="a4"></span><a href="">a4</a></li>
        <li><span class="a5"></span><a href="">a5</a></li>
    </ul>
</div>

<header>头部
    <nav>
        <ul>
            <li><a href="">导航1</a></li>
            <li><a href="">导航2</a></li>
            <li><a href="">导航3</a></li>
            <li><a href="">导航4</a></li>
            <li><a href="">导航5</a></li>
        </ul>
    </nav>    
</header>
<div class="container">
    <article>文章
        <section>内容1</section>
        <section>内容2</section>
    </article>
    <aside>侧边栏</aside>
</div>
<footer>底部</footer>


<div class="main">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

<div class="abc" style="margin:20px">
    <div class="aa"></div>
    <div class="bb"></div>
    <div class="clearfix"></div>
    <div class="cc"></div>

</div>
    


</body> 
</html> 